<template>
  <el-card v-loading="loading" shadow="hover" style="height: 100%; position: relative">
    <div slot="header" style="text-align: center; font-size: 20px;font-weight: bolder;color: #666; padding: 10px">
      <span>导出工序验收台账</span>
    </div>
    <el-form ref="crForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="选择项目" prop="projectId">
        <el-select v-model="form.projectId" style="width: 100%" filterable clearable placeholder="请选择项目" @change="projectChangeHandler">
          <el-option v-for="(item, index) in projects" :key="index" :label="item.cflastname" :value="item.fid" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择楼栋" prop="buildingId">
        <el-select v-model="form.buildingId" style="width: 100%" filterable clearable placeholder="请选择楼栋">
          <el-option v-for="(item, index) in buildings" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="包含旧工序" prop="dateRange">
        <el-radio-group v-model="form.containOld">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择工序" prop="checkTableIds">
        <el-input v-model="checkTableSel" readonly placeholder="请选择工序">
          <el-button slot="append" icon="el-icon-check" @click="selectProcessHandler">选择</el-button>
        </el-input>
      </el-form-item>
      <div style="text-align: center;width: calc(100% - 40px); position: absolute; bottom: 30px">
        <el-button type="primary" @click="exportHandler">导出</el-button>
      </div>
    </el-form>
    <select-process
      :visible.sync="selectProcessVisible"
      :selected.sync="form.checkTableIds"
      :building-id="form.buildingId"
      :contain-old="form.containOld"
    />
  </el-card>
</template>

<script>
import { downloadProcessStandingBook } from '@/api/statement/exportFile'
import SelectProcess from '@/views/components/SelectProcess'
import { buildingList } from '@/api/common'
export default {
  name: 'FilterForm',
  components: {
    SelectProcess
  },
  props: {
    projects: { type: Array, default: () => [] }
  },
  data() {
    return {
      buildings: [],
      form: {
        projectId: '',
        buildingId: '',
        containOld: false,
        checkTableIds: []
      },
      rules: {
        projectId: [
          { required: true, message: '请选择项目', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请选择楼栋', trigger: 'blur' }
        ],
        checkTableIds: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('请选择工序'))
              }
            }, trigger: 'blur' }
        ]
      },
      loading: false,
      selectProcessVisible: false
    }
  },
  computed: {
    checkTableSel() {
      const checkTableLen = this.form.checkTableIds.length
      if (checkTableLen) {
        return '已选中' + checkTableLen + '道工序'
      } else {
        return ''
      }
    }
  },
  methods: {
    projectChangeHandler(data) {
      this.form.buildingId = ''
      this.loading = true
      buildingList({ projectId: data }).then(res => {
        this.buildings = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    selectProcessHandler() {
      if (this.form.buildingId === '') {
        this.$message.warning('请先选择楼栋！')
        return
      }
      this.selectProcessVisible = true
    },
    /**
     * 导出
     */
    exportHandler() {
      this.$refs.crForm.validate((valid) => {
        if (valid) {
          const params = { ...this.form }
          this.loading = true
          downloadProcessStandingBook(params).then(file => {
            if (file) {
              const project = this.projects.find(item => item.fid === params.projectId)
              const building = this.buildings.find(item => item.id === params.buildingId)
              const elink = document.createElement('a')
              const blob = new Blob([file])
              elink.download = `${project.cflastname}${building.name}工程协同关键工序验收台账.xlsx`
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              // 释放URL 对象
              URL.revokeObjectURL(elink.href)
              document.body.removeChild(elink)
            } else {
              this.$message.error('导出文件失败')
            }
          }).catch(msg => {
            this.$message.error(msg)
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
